<template>
  <div>
    <div style="height:calc(100vh);">
      <RelationGraph
        ref="graphRef"
        :options="graphOptions"
        :on-node-click="onNodeClick"
        :on-line-click="onLineClick"
        @onNodeClick="onNodeClick"
      >
        <template #node="{node}">
         
          <div class="my-rg-node">{{node.text}}</div>
          <div class="my-rg-node">{{node.id}}</div>
        </template>
      </RelationGraph>
    </div>
  </div>
</template>

<script>
// 如果您没有在main.js文件中使用Vue.use(RelationGraph); 就需要使用下面这一行代码来引入relation-graph
import RelationGraph from 'relation-graph';
export default {
  name: 'Demo4Logo',
  components: { RelationGraph},
  data() {
    return {
      isShowCodePanel: false,
      graphOptions: {
        debug: false,
        defaultJunctionPoint: 'border',
        defaultNodeColor: '#519633',
        defaultLineColor: '#c8d300',
        defaultFocusRootNode: false,
        defaultLineTextOffset_y: -3,
        layout: {
          layoutName: 'center'
        }
        // 这里可以参考"Graph 图谱"中的参数进行设置
      }
    };
  },
  mounted() {
    this.showGraph();
  },
  methods: {
    showGraph() {
      const __graph_json_data = {
        rootId: 'a',
        nodes: [
          { id: 'a', text: 'A', type: 'my-root-node', color: '#c8d300', nodeShape: 0, width: 100, height: 100, data: { imageUrl: 'https://www.relation-graph.com/images/relation-graph-yellow-small.png' } },
          { id: 'b', text: 'B', type: 'my-input-node', nodeShape: 1, fontColor: '#c8d300' },
          { id: 'c', text: 'C', type: 'my-color-node', nodeShape: 1, color: '#519633', width: 80, height: 60 },
          { id: 'e', text: 'E', type: 'my-cool-node', color: 'transparent' },
          { id: 'f', text: 'F', nodeShape: 0, width: 100, height: 100 },
          { id: 'g', text: 'G', nodeShape: 1, width: 100, height: 50 }
        ],
        lines: [
          { from: 'a', to: 'b', text: 'Line Text', color: '#519633' },
          { from: 'a', to: 'c', text: 'Line Text' },
          { from: 'a', to: 'e', text: 'Line Text', lineShape: 6, fromJunctionPoint: 'border', toJunctionPoint: 'left' },
          { from: 'a', to: 'f', text: '', color: '#519633', lineShape: 6, fromJunctionPoint: 'border', toJunctionPoint: 'bottom' },
          { from: 'a', to: 'g', text: 'Text 1', color: '#519633', lineShape: 1 },
          { from: 'a', to: 'g', text: 'Text 2', color: '#519633', lineShape: 1 },
          { from: 'a', to: 'g', text: 'Text 3', color: '#519633', lineShape: 1 },
          { from: 'f', to: 'g', text: '', color: '#519633', lineShape: 6, fromJunctionPoint: 'left', toJunctionPoint: 'left' },
          { from: 'f', to: 'g', text: '', color: '#519633', lineShape: 6, fromJunctionPoint: 'right', toJunctionPoint: 'right' }
        ]
      };
      this.$refs.graphRef.setJsonData(__graph_json_data, (graphInstance) => {
        // 这些写上当图谱初始化完成后需要执行的代码
      });
    },
    onNodeClick(nodeObject, $event) {
      console.log('onNodeClick:', nodeObject);
    },
    onLineClick(lineObject, linkObject, $event) {
      console.log('onLineClick:', lineObject);
    },
    onMyNodeColorChange(node, event) {
      const newColor = event.target.value;
      console.log('onMyNodeColorChange:', node.id, newColor);
      const graphInstance = this.$refs.graphRef.getInstance();
      const rootNode = graphInstance.getNodeById('a');
      rootNode.color = newColor;
    }
  }
};
</script>

<style lang="scss" scoped>
.my-rg-node {
  display: flex;
  place-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  .my-form {
    padding: 10px;
    input {
      padding: 2px 5px;
      background-color: #c8d300;
      color: #519633;
      border-radius: 5px;
    }
  }
  img.my-image {
    user-select: none;
    pointer-events: none;
    width: 40px;
    height: 40px;
    animation: rotate 10s linear infinite;
  }
}
.my-root-node {
  border: #519633 solid 2px;
  border-radius: 50%;
}
.my-cool-node {
  
  border-radius: 30% 90% 70% 30%/30% 30% 70% 90%;
  transform: rotate(-22deg) translateX(0px);
  border: #519633 solid 1px;
}
</style>
